package pri.jz.keeper.ui.view.content.personal

import android.app.Activity
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.google.accompanist.insets.statusBarsHeight
import kotlinx.coroutines.launch
import pri.jz.keeper.R
import pri.jz.keeper.entity.User
import pri.jz.keeper.jui.JTextField.JBaseTextField
import pri.jz.keeper.jui.JTopBar
import pri.jz.keeper.jui.jsheet.JBottomSelectSheet
import pri.jz.keeper.ui.content.personal.userinfo.*
import pri.jz.keeper.ui.theme.*
import pri.jz.keeper.ui.view.HorizontalPadding
import pri.jz.keeper.ui.view.MainButton

/**
 *Author by: JZ
 *Email: 2451756617@qq.com
 *PS:
 */
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun UserInfoView(
    viewModel: UserInfoViewModel = viewModel(),
) {
    val context = LocalContext.current
    val user by viewModel.user.observeAsState(User())
    val scope = rememberCoroutineScope()
    val bottomShate = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val sexList = remember { listOf("男","女","外星人") }
    JBottomSelectSheet(
        sheetState = bottomShate,
        itemList = sexList,
        onCancel = {
            scope.launch { bottomShate.hide() }
        },
        onConfirm = { selectIndex ->
            viewModel.dispatcher(UserInfoIntent.OnSexValueChange(sexList[selectIndex]))
            scope.launch { bottomShate.hide() }
        }
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            JTopBar(
                onFinished = { (context as Activity).finish() },
                background = Color.White
            ) {
                Text(stringResource(R.string.topbar_userinfo))
            }
            UserInfoContent(
                user = user ?: User(),
                viewModel = viewModel,
                modifier = Modifier.fillMaxHeight(0.4f).fillMaxWidth(),
                onSexClick = {
                    scope.launch { bottomShate.show() }
                }
            )
        }
    }
}

@Composable
private fun UserInfoContent(
    modifier: Modifier = Modifier,
    user: User,
    viewModel: UserInfoViewModel,
    onSexClick: () -> Unit
) {
    Column(modifier = modifier) {
        UserHeadLayout(
            icon = user.headIcon?.asImageBitmap() ?: ImageBitmap.imageResource(R.drawable.img_default_head),
            modifier = Modifier.padding(15.dp).fillMaxWidth().fillMaxHeight(0.45f),
            onHeadIconClick = {viewModel.dispatcher(UserInfoIntent.OnHeadIconClick())}
        )
        Spacer(Modifier.height(10.dp))
        UserInfoLayout(
            nameText = viewModel.nameText,
            onNameTextChange = { viewModel.dispatcher(UserInfoIntent.OnNameValueChange(it))},
            sexText = viewModel.sexText,
            onSexClick = onSexClick
        )
        MainButton(
            text = "保存",
            modifier = Modifier.fillMaxWidth(0.6f).height(50.dp)
        ) {

        }
    }
}

@Composable
private fun UserHeadLayout(
    icon: ImageBitmap,
    onHeadIconClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier,
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        IconButton(
            onClick = onHeadIconClick,
            modifier = Modifier.weight(1f)
        ) {
            Image(
                bitmap = icon,
                modifier = Modifier.fillMaxHeight().clip(CircleShape),
                contentScale = ContentScale.Crop,
                contentDescription = null,
            )
        }
        Spacer(modifier = Modifier.height(8.dp))
        Text("点击更换头像", fontSize = 12.sp)
    }
}

@Composable
private fun UserInfoLayout(
    modifier: Modifier = Modifier,
    nameText: String,
    onNameTextChange: (String) -> Unit,
    sexText: String,
    onSexClick: () -> Unit
) {
    Column(modifier) {
        UserInfoItem(
            title = stringResource(R.string.title_userinfo_name),
        ) {
            JBaseTextField(
                value = nameText,
                onValueChange = onNameTextChange,
                singleLine = true,
            )
        }
        Spacer(Modifier.padding(HorizontalPadding).height(1.dp).fillMaxWidth().background(Grey3))
        UserInfoItem(
            title = stringResource(R.string.title_userinfo_sex),
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable{
                        onSexClick()
                    }
            ) {
                Text(sexText,modifier = Modifier.weight(1f), style = Typography.body2)
                Icon(painterResource(R.drawable.img_into),contentDescription = null, tint = Grey2,modifier = Modifier.padding(horizontal = HorizontalPadding))
            }
        }
    }
}

/**
 * 用户信息子项
 * @param modifier
 * @param title 标题
 * @param RightContent 右侧布局
 */
@Composable
private fun UserInfoItem(
    title: String,
    RightContent: @Composable RowScope.() -> Unit
) {
    Row(
        modifier = Modifier.fillMaxWidth().height(30.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            modifier = Modifier.padding(horizontal = HorizontalPadding).fillMaxWidth(0.2f),
            text = title,
            style = Typography.h6
        )
        RightContent()
    }
}

@Preview
@Composable
private fun PreviewUserInfo() {
    KeeperTheme {
        Surface(modifier = Modifier.fillMaxSize()) {
            UserInfoView()
        }
    }
}